import { Button } from 'antd';
import type React from 'react';
import {
  attachTrack,
  detachTrack,
  getTrack,
} from '@/components/MapView/Mapless/mana/track';
import styles from '../../index.module.less';
import type { TestControlProps } from '../types';

const Index: React.FC<TestControlProps> = ({ maplessRef }) => {
  const onAddTracks = () => {
    const trackManager = attachTrack(maplessRef.current, 'tm1', {
      maxPoints: 10,
    });
    trackManager?.addTracks(
      [
        {
          longitude: 113.266,
          latitude: 23.131,
          label: '起点',
          value: 10,
          color: '#ff0000',
        },
        {
          longitude: 113.276,
          latitude: 23.141,
          label: '中点1',
          value: 20,
          color: '#00ff00',
        },
        {
          longitude: 113.277,
          latitude: 23.122,
          label: '中点2',
          value: 20,
          color: '#00ff00',
        },
        {
          longitude: 113.287,
          latitude: 23.127,
          label: '终点',
          value: 20,
          color: '#00ff00',
        },
      ],
      (track) => {
        // 回调函数可以修改track属性
        if (track.value && track.value > 15) {
          return { ...track, color: '#ff9900' };
        }
        return track;
      },
    );
  };

  const onAddTrack = () => {
    const trackManager = getTrack(maplessRef.current, 'tm1');
    const randX = Math.random();
    const randY = Math.random();
    trackManager?.addTrack({
      longitude: 113.276 + randX / 100,
      latitude: 23.141 + randY / 100,
      label: '',
      value: 10 + randX + randY,
      color: '#ff0000',
    });
  };

  const onShowTrack = () => {
    const tMan1 = getTrack(maplessRef.current, 'tm1');
    tMan1?.setVisible(!tMan1.IsVisible);
  };

  const onClearTrack = () => {
    detachTrack(maplessRef.current, 'tm1');
  };

  return (
    <div className={styles.test}>
      <Button onClick={onAddTracks}>绘制轨迹</Button>
      <Button onClick={onAddTrack}>添加轨迹点</Button>
      <Button onClick={onShowTrack}>显示/隐藏</Button>
      <Button onClick={onClearTrack}>清除轨迹</Button>
    </div>
  );
};

export default Index;
